<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <link rel="icon" type="image/png" href="../../artwork/favicon.png">
      <title>WebScraper</title>
      <!link href="style.css" rel="stylesheet"/>
      <link href="css/bootstrap.min.css" rel="stylesheet"/>
      <script src="../../js/angular.min.js"></script>
      <link href="css/json-formatter.css" rel="stylesheet"/>
    </head>
   <body ng-app="TweetSearch" ng-controller="Controller">
      <center>
         <h1>What would you like to scrape?</h1>
         <br>
         <div>
             <div class="form-group">
               <div class="input-group" id="searchBar" style="width:600px;">
                  <input type="text" id="url" class="form-control" ng-model="url" placeholder="Enter website address">
                  <span class="input-group-btn">
                  <button href='#' class="btn btn-default" type="button" id="button" ng-click="Scrape()">Convert</button>
                  </span>
               </div>

            </div>
            <div ng-if="spinner && !data"><img src="loading.gif" height="400" width="400"/></div>
            <br>
            <br>
            <br>
         </div>
      </center>
      <div ng-if="data" style="padding-left:28%;">
        <json-formatter json="data" open="1"></json-formatter>
      </div>

      <script src="js/json-formatter.min.js"></script>
      <script>
         angular.module('TweetSearch', ['jsonFormatter']).
         controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

             $scope.Scrape = function() {
                $scope.spinner=true;
                 var QueryCommand = 'https://api.loklak.org/api/genericscraper.json?\
                                     callback=JSON_CALLBACK&url=' +
                                     $scope.url;
                 $http.jsonp(String(QueryCommand)).success(function(JSON) {
                  $scope.data = JSON;
                 });

             };

      window.addEventListener("keydown",   function flagup(event)
            {
              if(event.key=='Enter')
              {
          $scope.Scrape();
              }
            });
            $scope.spinner = false;
         }]);
      </script>
   </body>
</html>
